<template>
	<!-- 自定义标题栏 -->
	<div class="header-content">
		<div class="left">
			<div class="logo">
				<img :src="headerRef.logoUrl" draggable="false" />
			</div>
			<div class="tools" v-show="store.state.sysType === 'system'">
				<pui-icon name="save"></pui-icon>
				<span class="item">
					<pui-icon name="revoke"></pui-icon>
					<pui-icon name="triangle-down"></pui-icon>
				</span>
				<pui-icon name="anti-revoke"></pui-icon>
				<pui-popper theme="light" @onClose="clickOutsideHandle" @onOpen="toggleOpen">
					<pui-icon name="extend"></pui-icon>
					<template #popper>
					</template>
			    </pui-popper>
			</div>
		</div>
		<div class="content">
			<img v-if="projectName" :src="getIcons()" draggable="false" />{{ projectName && projectName + ' — PhotLab' || '' }}
		</div>
		<div class="right">
			<div class="system-selector">
				{{ store.state.sysName }}
				<pui-popper theme="light" @onClose="clickOutsideHandle" @onOpen="toggleSysOpen" placement="bottom">
					<div class="arrow_icon">
						<pui-icon class="pui-toolbar_item_arrow" name="triangle-down"></pui-icon>
					</div>
					<template #popper>
						<div class="pui-selector-content">
							<div class="pui-selector-content_list">
								<div :class="['pui-selector-content_item', store.state.sysType === item.type && 'active-item']" v-for="(item, i) in sysRef.systemList" :key="i" @click.stop="sysTypeChange(item)">
									<div class="content-label">{{item?.title}}</div>
								</div>
							</div>
						</div>
					</template>
				</pui-popper>
			</div>
			<div class="win-tools">
				<pui-icon name="minus" @click="windowToolsClickHandle('min')"></pui-icon>
				<pui-icon name="copy" @click="windowToolsClickHandle('max')"></pui-icon>
				<pui-icon name="close" @click="windowToolsClickHandle('close')"></pui-icon>
			</div>
		</div>
	</div>
</template>
<script lang="ts">
import { defineComponent } from "vue"
export default defineComponent({
	name: 'LayoutHeader'
})
</script>
<script lang="ts" setup>
import { reactive, computed, getCurrentInstance } from "vue"
import headerData from './index'
import { ipcRenderer } from "electron"
import { useStore } from "vuex"
import { graphManager } from "@/services/phot_client/graph"
import { graphService } from '@/services/phot_client/client'
const { proxy }: any = getCurrentInstance()
const emit = defineEmits({
	"sysTypeChange": (val: boolean) => true,
	"onLocaleChange": (val: boolean) => true,
})
const projectName = computed(() => {
	return store.state.sysType === 'system' ? store.state.photGraph.name : store.state.sysType === 'passive_device'? store.state.photGrid.name : store.state.photActiveDevice.name
})
const store = useStore()
const headerRef = reactive(headerData.headerRef)
const sysRef = reactive({
	windowType: false,
	isEn: false,
	isDark: store.state.theme === 'dark',
	showPopper: false,
	showSysPopper: false,
	systemName: '系统仿真',
	systemList: [
		{title: '系统仿真', type: 'system'},
		{title: '无源器件仿真', type: 'passive_device'},
		{title: '有源器件仿真', type: 'active_device'},
	]
})
// 窗口事件
const windowToolsClickHandle = async (type: string) => {
	if (type === 'close') {
		// try {
			proxy.$loading.open('正在关闭...')
			// await graphManager.closeAllOpenedGraph()
			setTimeout(() => {
				proxy.$loading.close()
				ipcRenderer.send('control', type)
			}, 1000)
		// } catch (err: any) {
		// 	setTimeout(() => {
		// 		ipcRenderer.send('control', type)
		// 	}, 2000)
		// 	proxy.$loading.close()
		// }
	} else {
		ipcRenderer.send('control', type)
	}
}
const openNewWindow = () => {
	ipcRenderer.send('control', 'new-win', 'PhotAnalyze')
}
const clickOutsideHandle = () => {
	sysRef.showPopper = false
	sysRef.showSysPopper = false
}
const toggleOpen = () => {
	sysRef.showPopper = !sysRef.showPopper
}
const toggleSysOpen = () => {
	sysRef.showSysPopper = !sysRef.showSysPopper
}
const sysTypeChange = (e: any) => {
	console.log(e)
	sysRef.systemName = e.title
	emit("sysTypeChange", e)
}
const getIcons = () => {
	return require(`@/assets/file-icon.svg`)
}
</script>
